<template>
  <div class="d_container">
    <!--    顶部导航条-->
    <div class="topNav">
      <div>
        <span class="back  pointer" @click="Back"><i class="el-icon-arrow-left" /> 返回</span>
        <span class="fw">订单详情</span>
      </div>
      <div class="orderTopBtn">
        <!-- <el-button v-if="orderInfos.baseData.orderState===1&&orderInfos.baseData.produceState===1" size="small" class="buttonBox1" @click="cancelClick(orderInfos.baseData)">
          <i class="iconfont recallIco mr5" />客户撤单
        </el-button> -->
        <!-- <el-button v-if="orderInfos.baseData.orderState===1" size="small" class="buttonBox1" @click="withdraw(orderInfos.baseData.orderID)">
          <i class="iconfont recallIco mr5" />撤回
        </el-button>
        <el-button
          v-if="orderInfos.baseData.orderState===1&&orderInfos.baseData.produceState===0"
          size="small"
          class="buttonBox1"
          @click="nullifyClick(orderInfos.baseData)"
        >
          <i class="iconfont nullifyIco f12 mr5" />作废
        </el-button>
        <template v-if="orderInfos.baseData.orderState!==0">
          <el-button size="small" class="buttonBox" @click="revisionCopy(orderInfos)"><i class="el-icon-document-copy mr5" />改版复制</el-button>
          <el-button size="small" class="buttonBox" @click="newVersionCopy(orderInfos)"><i class="el-icon-document-copy mr5" />新版复制</el-button>
          <el-button size="small" class="buttonBox" @click="oldVersionCopy(orderInfos)"><i class="el-icon-document-copy mr5" />老版复制</el-button>
        </template> -->
        <el-button v-if="orderInfos.baseData.orderState===0" size="small" class="buttonBox2" @click="deleteOrder(orderInfos.baseData.orderID)"><i class="el-icon-delete mr5" />删除</el-button>
        <el-button v-if="orderInfos.baseData.orderState===0" size="small" class="buttonBox2" @click="editOrder(orderInfos)"><i class="el-icon-edit-outline mr5" />编辑</el-button>
        <el-button v-if="orderInfos.baseData.orderState===0" :loading="orderLoading" class="zsButton" type="primary" size="small" :disabled="orderLoading" @click="confirmOrder">确认发布</el-button>
      </div>
    </div>
    <div class="mainCon">
      <div class="content">
        <div class="pruName flex"><span class="fw f22 mr10">{{ orderInfos.productData.orderProductName }}</span> <span class="orderType">{{ orderInfos.baseData.orderTypeName }}</span></div>
        <div class="d_info">
            <dl>
              <dt>订单编号</dt>
              <dd>{{ orderInfos.baseData.orderNo || "--" }}</dd>
            </dl>
            <dl>
              <dt>版面</dt>
              <dd>{{ orderInfos.baseData.printingSurface || "--" }}</dd>
            </dl>
            <dl>
              <dt>版本</dt>
              <dd>{{ orderInfos.baseData.productVersions || "--" }}</dd>
            </dl>
            <dl>
              <dt>标签套数</dt>
              <dd>{{ orderInfos.baseData.taoZhuangQuantity || "--" }}<span class="unit">{{orderInfos.baseData.taoZhuangQuantity=== orderInfos.baseData.tagSumQuantity?'枚':'套'}}</span></dd>
            </dl>
            <dl>
              <dt>标签枚数</dt>
              <dd>{{ orderInfos.baseData.tagSumQuantity || "--" }}<span class="unit">枚</span></dd>
            </dl>
        </div>
        <!-- 订单状态  -->
        <div class="d_orState">
          <ul>
            <li>
              <div class="item">
                <i class="iconfont orderIco" :class="orderInfos.baseData.orderStateName==='已确认'?'iconBg_4 OkIco':''"></i>
                <dl>
                  <dt>{{ orderInfos.baseData.orderStateName || "--" }}</dt>
                  <dd>业务状态</dd>
                </dl>
              </div>
            </li>
            <li>
              <div class="item">
                <i class="iconfont orderIco" :class="orderInfos.baseData.colorDraftStateName==='审核通过'?'iconBg_4 OkIco':''"></i>
                <dl>
                  <dt>{{ orderInfos.baseData.colorDraftStateName || "--" }}</dt>
                  <dd>彩稿状态</dd>
                </dl>
              </div>
            </li>
            <li>
              <div class="item">
                <i class="iconfont orderIco" :class="orderInfos.baseData.produceStateName==='已完成'?'iconBg_4 OkIco':''"></i>
                <dl>
                  <dt>{{ orderInfos.baseData.produceStateName || "--" }}</dt>
                  <dd>生产状态</dd>
                </dl>
              </div>
            </li>
            <!-- <li>
              <div class="item">
                <i class="iconfont orderIco" :class="orderInfos.baseData.orderStateName==='已缴库'?'iconBg_4 OkIco':''"></i>
                <dl>
                  <dt>{{ orderInfos.baseData.orderStateName || "--"}}</dt>
                  <dd>缴库状态</dd>
                </dl>
              </div>
            </li> -->
            <li>
              <div class="item">
                <i class="iconfont orderIco" :class="orderInfos.baseData.financeStateName==='已收款'?'iconBg_4 OkIco':''"></i>
                <dl>
                  <dt>{{ orderInfos.baseData.financeStateName || "--" }}</dt>
                  <dd>收款状态</dd>
                </dl>
              </div>
            </li>
            <li>
              <div class="item">
                <i class="iconfont orderIco" :class="orderInfos.baseData.deliveryStateName==='已发货'?'iconBg_4 OkIco':''"></i>
                <dl>
                  <dt>{{ orderInfos.baseData.deliveryStateName || "--" }}</dt>
                  <dd>发货状态</dd>
                </dl>
              </div>
            </li>
            <li>
              <div class="item">
                <i class="iconfont orderIco"></i>
                <dl>
                  <dt>{{ orderInfos.baseData.expectedDeliveryTime ?orderInfos.baseData.expectedDeliveryTime.split(' ')[0] :"--" }}</dt>
                  <dd>发货日期</dd>
                </dl>
              </div>
            </li>
          </ul>
        </div>
        <!-- tab选项卡-->
        <div class="tabChangeBox">
          <ul class="flex">
            <template v-for="(item, index) in tabList">
              <li :key="item" :class="tabIndex===index?'on':''" @click="tabChange(index)">{{ item }}</li>
            </template>
          </ul>
        </div>
        <!-- 组件层  -->
        <div class="assemblyBox">
          <!--订单详情-->
          <template v-if="tabIndex===0">
            <orderInfo :order-infos="orderInfos" />
          </template>
          <!--彩稿信息-->
          <template v-if="tabIndex===1">
            <colorDrafts :order-no="orderInfos.baseData.orderNo" />
          </template>
          <!--生产任务-->
          <template v-if="tabIndex===2">
            <product :order-no="orderInfos.baseData.orderNo" />
          </template>
          <!--机台任务-->
          <template v-if="tabIndex===3">
            <machine :order-no="orderInfos.baseData.orderNo" />
          </template>
          <!--领料明细-->
          <template v-if="tabIndex===4">
            <pickup :order-no="orderInfos.baseData.orderNo" />
          </template>
          <!--退料明细-->
          <template v-if="tabIndex===5">
            <repickup :order-no="orderInfos.baseData.orderNo" />
          </template>
          <!--缴库明细-->
          <template v-if="tabIndex===6">
            <turnIn :order-no="orderInfos.baseData.orderNo" />
          </template>
          <!--文件管理-->
          <template v-if="tabIndex===7">
            <fileManage :order-no="orderInfos.baseData.orderNo" />
          </template>
        </div>
      </div>
    </div>
    <!-- 撤单原因   -->
    <el-dialog
      :title="ops==='cancelOrder'?'撤单原因':'作废原因'"
      :visible.sync="reasonVisible"
      :close-on-click-modal="false"
      custom-class="comDialog"
      append-to-body
      width="30%"
      @close="closeCancelDialog"
    >
      <div class="dialogDody">
        <el-form
          ref="cancelForm"
          :model="cancelForm"
          :rules="rules"
          label-width="0px"
          class="dialogForm"
        >
          <el-form-item label="" prop="reason">
            <el-input
              v-model="cancelForm.reason"
              type="textarea"
              :autosize="{ minRows: 2}"
              placeholder="请输入内容"
              size="mini"
              clearable
            />
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="reasonVisible=false">取 消</el-button>
        <el-button
          :loading="addLableLoading"
          :disabled="addLableLoading"
          element-loading-spinner="el-icon-loading"
          type="primary"
          size="mini"
          @click="saveReason"
        >保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import orderInfo from './components/orderInfo'
import colorDrafts from './components/colorDraftsInfo'
import fileManage from './components/fileManage'
import product from './components/product'
import pickup from './components/pickup'
import repickup from './components/repickup'
import turnIn from './components/turnIn'
import machine from './components/machine'
export default {
  name: '',
  components: { orderInfo, colorDrafts, fileManage, product, pickup, repickup, turnIn, machine },
  data() {
    return {
      ops: 'cancelOrder',
      addLableLoading: false,
      reasonVisible: false, // 原因弹框是否打开
      saleOrderID: '',
      saleOrderNo: '',
      cancelForm: {
        orderID: '',
        orderNo: '',
        reason: ''
      }, // 撤单，作废原因
      tabIndex: 0, // 选项卡索引
      orderLoading: false, // 确认发布加载
      orderInfos: {
        baseData: {},
        productData: {}
      }, // 订单详情数据
      tabList: ['订单信息', '彩稿信息', '生产任务', '机台任务', '领料明细', '退料明细', '缴库明细', '文件管理'], // 选项卡内容
      rules: {
        reason: [
          { required: true, message: '请填写原因', trigger: ['change', 'blur'] }
        ]
      }
    }
  },
  created() {
    // 得到订单详情数据
    this.saleOrderID = this.$route.query.saleOrderID
    this.saleOrderNo = this.$route.query.saleOrderNo
    this.orderNo = this.$route.query.saleOrderNo
    this.tabIndex = Number(this.$route.query.tabIndex)
    //  saleOrderID: this.$route.query.saleOrderID
    this.getOderDetail()
  },
  mounted() {},
  methods: {

    // 撤单，作废
    saveReason() {
      this.$refs.cancelForm.validate((valid) => {
        if (valid) {
          if (this.ops === 'cancelOrder') {
            // 撤单
            this.cancelOrder()
          } else {
            // 作废接口调用
            this.nullifyOrder()
          }
        }
      })
    },
    // 作废接口调用
    nullifyOrder() {
      const parmas = {
        orderID: this.cancelForm.orderID,
        scrapRemark: this.cancelForm.reason
      }
      this.$confirm('确定作废?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.addLableLoading = true
        this.$api.business.ScrapSaleOrder(parmas).then(() => {
          this.$message({
            message: '作废成功',
            type: 'success'
          })
          this.reasonVisible = false
          this.addLableLoading = false
          this.$router.go(-1)
        }).catch(() => {
          this.reasonVisible = false
          this.addLableLoading = false
        })
      })
    },
    // 作废点击事件
    nullifyClick(row) {
      this.cancelForm.orderID = row.orderID
      this.reasonVisible = true
      this.ops = 'nullifyOrder'
    },
    // 撤单接口
    cancelOrder() {
      const parmas = {
        orderID: this.cancelForm.orderID,
        orderNo: this.cancelForm.orderNo,
        cancelReason: this.cancelForm.reason
      }
      this.$confirm('确定撤单?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.addLableLoading = true
        this.$api.business.CancelSaleOrder(parmas).then(() => {
          this.$message({
            message: '撤单成功',
            type: 'success'
          })
          this.reasonVisible = false
          this.addLableLoading = false
          this.$router.go(-1)
        }).catch(() => {
          this.reasonVisible = false
          this.addLableLoading = false
        })
      })
    },
    // 撤单点击事件
    cancelClick(row) {
      this.cancelForm.orderID = row.orderID
      this.cancelForm.orderNo = row.orderNo
      this.reasonVisible = true
      this.ops = 'cancelOrder'
    },
    // 改版复制
    revisionCopy(row) {
      this.$router.push({
        path: '/business/addOrder', // 跳转的路径
        query: {
          isCreateNewOrder: true,
          excuteAction: '改版',
          orderID: row.baseData.orderID
        }
      })
    },
    // 新版复制
    newVersionCopy(row) {
      this.$router.push({
        path: '/business/addOrder', // 跳转的路径
        query: {
          isCreateNewOrder: true,
          excuteAction: '新版',
          orderID: row.baseData.orderID
        }
      })
    },
    // 老版复制
    oldVersionCopy(row) {
      this.$router.push({
        path: '/business/addOrder', // 跳转的路径
        query: {
          isCreateNewOrder: true,
          excuteAction: '老版',
          orderID: row.baseData.orderID
        }
      })
    },
    // 修改订单事件
    editOrder(row) {
      this.$router.push({
        path: '/business/addOrder', // 跳转的路径
        query: {
          isCreateNewOrder: false,
          excuteAction: row.baseData.printingSurface,
          orderID: row.baseData.orderID
        }
      })
    },
    // 订单撤回
    withdraw(orderID) {
      const parmas = {
        orderID: orderID
      }
      this.$confirm('确定撤回订单?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$api.business.RevocationSaleOrder(parmas).then(() => {
          this.$message({
            message: '撤回成功',
            type: 'success'
          })
          this.getAllLists()
        })
      })
    },
    // 删除订单
    deleteOrder(orderID) {
      const parmas = {
        orderID: orderID
      }
      this.$confirm('确定删除订单?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$api.business.DeleteSaleOrder(parmas).then(() => {
          this.$message({
            message: '删除成功',
            type: 'success'
          })
          this.$router.go(-1)
        })
      })
    },
    // 选项卡切换
    tabChange(index) {
      this.tabIndex = index
    },
    // 确认发布
    confirmOrder() {
      const parmas = {
        orderID: this.orderInfos.baseData.orderID,
        orderNo: this.orderInfos.baseData.orderNo
      }
      this.$confirm('确认发布订单?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.orderLoading = true
        this.$api.business.SureSaveSaleOrder(parmas).then(res => {
          this.orderLoading = false
          this.$message({
            message: '确认成功',
            type: 'success'
          })
          this.$router.push({
            path: '/business/placeAnOrder'
          })
        }).catch(() => {
          this.orderLoading = false
        })
      })
    },
    // 得到订单详情数据
    getOderDetail() {
      const parmas = {
        saleOrderID: this.saleOrderID,
        saleOrderNo: this.saleOrderNo || this.orderNo
      }
      this.$api.business.GetSaleOrderDetail(parmas).then(res => {
        this.orderInfos = res
        //productData
        for(let item in this.orderInfos.baseData){
          if(this.orderInfos.baseData[item] == -1){
            this.orderInfos.baseData[item] = '--'
          }
        }
      })
    },
    // 返回
    Back() {
      this.$router.go(-1)
    },
    closeCancelDialog() {
      if (this.$refs.cancelForm) {
        this.$refs.cancelForm.resetFields()
      }
      this.cancelForm = this.$options.data().cancelForm
    }
  }
}
</script>
<style lang="scss" scoped>
.assemblyBox{
  padding-top: 13px;
  width: 100%;
  flex: 1;
}
.tabChangeBox{
  border-bottom:1px solid #E6E6E6;
  width: 100%;
  li{
    line-height: 44px;
    font-weight: bold;
    margin-right: 32px;
    position: relative;
    padding: 0 8px;
    cursor: pointer;
    &.on:before{
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 2px;
      background: #3f61f1;
    }
  }
}
.pruName{
  width: 100%;
}
.orState{
  padding: 16px 0;
  width: 100%;
  li{
    margin-right: 30px;
  }
  .icon{
    width: 36px;
    height: 36px;
    border-radius: 100%;
    border: 1px solid #999AAA;
    text-align: center;
    line-height: 36px;
  }
}
.bbinfo{
  width: 100%;
  background: rgba(245, 246, 249, 1);
  padding: 5px;
  margin-top: 10px;
  li{
    margin-right: 16px;
  }
}
.mainCon{
  padding: 10px;
  width: 100%;
  height: calc(100% - 52px);
  .content{
    background: #fff;
    border-radius: 8px;
    width: 100%;
    height: 100%;
    border: 1px solid #eee;
    padding: 22px;
    overflow-y: auto;
    .orderType{
      background:rgba(63, 97, 241, 0.1);
      color: #3f61f1;
      line-height: 22px;
      display: inline-block;
      padding: 0 7px;
    }
  }
}
.container{
  height: 100%;
}
.zsButton{
  min-width: 90px;
}
.buttonBox1{
  font-size: 14px;
  padding: 7px 0px;
  min-width: 110px;
}
.buttonBox2{
  font-size: 14px;
  padding: 8px 0px;
  min-width: 90px;
}
.buttonBox{
  font-size: 14px;
  padding: 8px 0px;
  min-width: 110px;
}

</style>
